<!--
 * @Author: your name
 * @Date: 2021-03-03 10:09:47
 * @LastEditTime: 2021-03-03 11:51:48
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \html\src\views\needdo\index.vue
-->
<template>
  <el-container>
    <el-main class="main-full-height bg-white">
      <el-tabs v-model="tabsName" @tab-click="handleTab">
        <el-tab-pane name="w" label="待我审批">
          <el-row class="margin-bottom-sm text-normal">
            <el-col
              :span="24"
              style="display:flex;"
            >
              <div style=" height: 32px;line-height: 32px;">
                条件筛选：
              </div>
              <el-input
                v-model="queryList.SearchKey"
                placeholder="标题\单据号"
                class="filter-item"
                :clearable="true"
                size="small"
                style="margin-right:10px;width:150px;"
                @clear="handleSearchClear"
                @keyup.enter.native="handleFilter"
              />
              <el-button
                type="primary"
                size="small"
                @click="handleFilter"
              >
                <i class="el-icon-search" />
                搜索
              </el-button>
            </el-col>
          </el-row>

          <!-- Table -->
          <el-table
            v-loading="listLoading"
            :data="pendingMyApprovalList"
            border
            fit
            highlight-current-row
            style="width: 100%;"
          >
            <el-table-column label="序号" type="index" :index="indexMethod" width="70px" align="center" />
            <el-table-column label="标题" min-width="150px" align="center">
              <template slot-scope="{row}">
                <el-button type="text" @click="toDetail(row.Id)">{{ row.CustomName }}</el-button>
              </template>
            </el-table-column>
            <el-table-column label="单据号" prop="Code" align="center" />
            <el-table-column label="类型" prop="DesignName" width="150px" align="center" />
            <el-table-column label="提单人" prop="CreateUserName" width="150px" align="center" />
            <el-table-column label="提单时间" prop="ApplyTime" width="200px" align="center" />
            <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
              <template slot-scope="{row}">
                <el-button type="text" size="mini" @click="toDetail(row.Id)">审批</el-button>
              </template>
            </el-table-column>
            <template slot="empty">
              <HelpTips :page-name="'pendingMyApproval'" />
            </template>
          </el-table>
        </el-tab-pane>
        <el-tab-pane name="a" label="我已审批">
          <el-row class="margin-bottom-sm text-normal">
            <el-col
              :span="24"
              style="display:flex;"
            >
              <div style=" height: 32px;line-height: 32px; ">
                条件筛选：
              </div>
              <el-input
                v-model="queryList.SearchKey"
                placeholder="标题\单据号"
                class="filter-item"
                :clearable="true"
                size="small"
                style="margin-right:10px;width:150px;"
                @keyup.enter.native="handleFilter"
              />
              <el-button
                type="primary"
                size="small"
                @click="handleFilter"
              >
                <i class="el-icon-search" />
                搜索
              </el-button>
            </el-col>
          </el-row>

          <!-- Table -->
          <el-table
            v-loading="listLoading"
            :data="approvedList"
            border
            fit
            highlight-current-row
            style="width: 100%;"
          >
            <el-table-column label="序号" type="index" :index="indexMethod" width="70px" align="center" />
            <el-table-column label="标题" align="center">
              <template slot-scope="{row}">
                <el-button type="text" @click="toDetail(row.Id)">{{ row.CustomName }}</el-button>
              </template>
            </el-table-column>
            <el-table-column label="单据号" prop="Code" align="center" />
            <el-table-column label="类型" prop="DesignName" width="150px" align="center" />
            <el-table-column label="提单人" prop="CreateUserName" width="150px" align="center" />
            <el-table-column label="提单时间" prop="ApplyTime" width="200px" align="center" />
            <el-table-column label="流程状态" width="150px" align="center">
              <template slot-scope="{row}">
                <el-tag
                  v-if="row.Status == 1 && row.InstanceResult == 0"
                  type="primary"
                  size="medium"
                >草稿</el-tag>
                <el-tag
                  v-if="row.Status == 1 && row.InstanceResult == 5"
                  type="primary"
                  size="medium"
                >退回</el-tag>
                <el-tag
                  v-if="row.InstanceResult == 1 && row.ActivityType != 6 && row.ActivityType != 7"
                  type=""
                  size="medium"
                >审批中</el-tag>
                <el-tag
                  v-if="row.InstanceResult == 2"
                  type="success"
                  size="medium"
                >完成</el-tag>
                <el-tag
                  v-if="row.InstanceResult == 3"
                  type="warning"
                  size="medium"
                >撤回</el-tag>
                <el-tag
                  v-if="row.InstanceResult == 4"
                  type="danger"
                  size="medium"
                >不同意</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
              <template slot-scope="{row}">
                <el-button type="text" size="mini" @click="toDetail(row.Id)">详情</el-button>
              </template>
            </el-table-column>
            <template slot="empty">
              <HelpTips :page-name="'approved'" />
            </template>
          </el-table>
        </el-tab-pane>
        <el-tab-pane name="cc" label="抄送我的">
          <el-row class=" margin-bottom-sm text-normal">
            <el-col
              :span="24"
              style="display:flex;"
            >
              <div style=" height: 32px;line-height: 32px; ">
                条件筛选：
              </div>
              <el-input
                v-model="queryList.SearchKey"
                placeholder="标题\单据号"
                class="filter-item"
                :clearable="true"
                size="small"
                style="margin-right:10px;width:150px;"
                @keyup.enter.native="handleFilter"
              />
              <el-button
                type="primary"
                size="small"
                @click="handleFilter"
              >
                <i class="el-icon-search" />
                搜索
              </el-button>
            </el-col>
          </el-row>
          <!-- Table -->
          <el-table
            v-loading="listLoading"
            :data="copyMeList"
            border
            fit
            highlight-current-row
            style="width: 100%;"
          >
            <el-table-column label="序号" type="index" :index="indexMethod" width="70px" align="center" />
            <el-table-column label="标题" min-width="200px" align="center">
              <template slot-scope="{row}">
                <el-button type="text" @click="toDetail(row.Id,row.CcId)">{{ row.CustomName }}</el-button>
              </template>
            </el-table-column>
            <el-table-column label="单据号" prop="Code" align="center" />
            <el-table-column label="类型" prop="DesignName" width="150px" align="center" />
            <el-table-column label="提单人" prop="CreateUserName" width="150px" align="center" />
            <el-table-column label="提单时间" prop="ApplyTime" width="200px" align="center" />
            <el-table-column label="是否已读" prop="IsRead" width="200px" align="center">
              <template slot-scope="{row}">
                <el-tag v-if="row.IsRead">已读</el-tag>
                <el-tag v-else type="danger">未读</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
              <template slot-scope="{row}">
                <el-button type="text" size="mini" @click="toDetail(row.Id,row.CcId)">详情</el-button>
              </template>
            </el-table-column>
            <template slot="empty">
              <HelpTips :page-name="'copyMe'" />
            </template>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-main>
    <el-footer>
      <el-pagination
        :current-page="queryList.PageIndex"
        :page-size="queryList.PageSize"
        layout="total, prev, pager, next, jumper"
        :total="totalCount"
        @current-change="handleCurrentChange"
      />
    </el-footer>

    <billdetail ref="billdetail" :flow-instance-id="flowInstanceId" @loadData="loadData" />
  </el-container>

</template>
<script>
import billdetail from '@/views/components/billdetail'
import HelpTips from '@/views/components/common/helptips/help'
import { loadFlowInstances, loadCcFlowInstances, setRead } from '@/api/flow/index'
export default {
  components: { HelpTips, billdetail },
  data() {
    return {
      tabsName: 'w',
      listLoading: false,
      pendingMyApprovalList: [], // 待我审批列表
      approvedList: [], // 我已审批
      copyMeList: [], // 抄送我的
      totalCount: 0,
      flowInstanceId: '',
      // 条件列表
      queryList: {
        type: 'wait',
        SearchKey: '',
        PageIndex: 1,
        PageSize: 20
      }
    }
  },
  created() {
    var tb = this.$route.query.tb
    var fid = this.$route.query.fid
    if (tb) {
      this.tabsName = tb
      this.$nextTick(() => {
        this.handleFilter()
        if (fid) {
          this.toDetail(fid)
        }
      })
    } else {
      this.pendingMyApprovalData()
    }
  },
  methods: {
    pendingMyApprovalData() {
      this.queryList.type = 'wait'
      loadFlowInstances(this.queryList).then(res => {
        this.pendingMyApprovalList = res.TableData
        this.totalCount = res.TotalItemCount
      })
    },
    approvedListData() {
      this.queryList.type = 'disposed'
      loadFlowInstances(this.queryList).then(res => {
        this.approvedList = res.TableData
        this.totalCount = res.TotalItemCount
      })
    },
    copyMeData() {
      this.queryList.type = ''
      loadCcFlowInstances(this.queryList).then(res => {
        this.copyMeList = res.Data
        this.totalCount = res.TotalItemCount
      })
    },
    indexMethod(index) {
      var pageIndex = this.queryList.PageIndex <= 1 ? 0 : this.queryList.PageIndex - 1
      return pageIndex * 20 + index + 1
    },
    // 过滤
    handleFilter() {
      this.queryList.PageIndex = 1
      if (this.tabsName === 'w') {
        this.pendingMyApprovalData()
      }
      if (this.tabsName === 'a') {
        this.approvedListData()
      }
      if (this.tabsName === 'cc') {
        this.copyMeData()
      }
    },
    handleSearchClear() {
      this.queryList.PageIndex = 1
      if (this.tabsName === 'w') {
        this.pendingMyApprovalData()
      }
      if (this.tabsName === 'a') {
        this.approvedListData()
      }
      if (this.tabsName === 'cc') {
        this.copyMeData()
      }
    },
    // 点击翻页按钮
    handleCurrentChange(index) {
      this.queryList.PageIndex = index
      if (this.tabsName === 'w') {
        this.pendingMyApprovalData()
      }
      if (this.tabsName === 'a') {
        this.approvedListData()
      }
      if (this.tabsName === 'cc') {
        this.copyMeData()
      }
    },

    // 点击选项卡
    handleTab(obj) {
      if (obj.name === 'w') {
        this.queryList.SearchKey = ''
        this.pendingMyApprovalData()
      }
      if (obj.name === 'a') {
        this.queryList.SearchKey = ''
        this.approvedListData()
      }
      if (obj.name === 'cc') {
        this.queryList.SearchKey = ''
        this.copyMeData()
      }
    },
    toDetail(id, CcId) {
      this.flowInstanceId = id
      if (this.tabsName === 'cc' && CcId) { // 设为已读后刷新列表
        setRead(CcId).then(res => {
          this.copyMeData()
        })
      }
      this.$refs.billdetail.showBillDrawer(id)
    },
    loadData() {
      this.queryList.PageIndex = 1
      if (this.tabsName === 'w') {
        this.pendingMyApprovalData()
      }
      if (this.tabsName === 'a') {
        this.approvedListData()
      }
      if (this.tabsName === 'cc') {
        this.copyMeData()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
// .el-main {
//   padding: 0px 10px 0px 10px;
// }
</style>
